import { FC ,useEffect} from "react";
import useGetPageInfo from "../../hooks/useGetPageInfo";
import { setQuestion } from "../../store/QuestionReducer";
import { useDispatch } from "react-redux";
import { Form, Input } from "antd";
const { TextArea } = Input;

const QuestionInfo: FC = () => {
  const { title ='', desc = '', jscode = '', csscode = '' } = useGetPageInfo();
  const dispatch = useDispatch()
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue({ title, desc, jscode, csscode });
  }, [title, desc, jscode, csscode]);
  const valueChange = () => {
    
    dispatch(setQuestion(form.getFieldsValue()))
  };

  return (
    <Form
      layout="vertical"
      form={form}
      initialValues={{ title, desc, jscode, csscode }}
      onValuesChange={valueChange}
    >
      <Form.Item label="标题" name="title">
        <Input />
      </Form.Item>
      <Form.Item label="描述" name="desc">
        <TextArea />
      </Form.Item>
      <Form.Item label="脚本代码" name="jscode">
        <TextArea />
      </Form.Item>
      <Form.Item label="文本代码" name="csscode">
        <TextArea />
      </Form.Item>
    </Form>
  );
};

export default QuestionInfo;
